<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>dname</title>
    <link rel="stylesheet" type="text/css" href="css/iosSelect.css" />
    <link rel="stylesheet" type="text/css" href="css/current.css" />
  </head>

  <body>
    <div id="app">
      <my-component></my-component>
    </div>

    <script src="js/vue.js"></script>
    <script type="text/javascript" src="/node_modules/jquery/dist/jquery.min.js"></script>
    <script type="text/javascript" src="js/Lunar.js"></script>
    <script type="text/javascript" src="js/calendar.js"></script>
    <script type="text/javascript" src="js/iosSelect.js"></script>

    <script>
      Vue.config.productionTip = false // 阻止 Vue 在启动时生成生产提示

      // 自定义组件
      const myComponent = {
        data: function () {
          return {
            selectDateType: 1, // 控制日历类型（公历/农历）
            numFlag: '7月', // 用于判断是否是农历
            bigNum: '正|二|三|四|五|六|七|八|九|十|冬|腊', // 农历月份前缀，对应 1-12
            selectDateDom: null, // 触发下拉的选择器
            showDateDom: null, // 用于展示的选择器
            currentTime: {
              year: null,
              month: null,
              day: null,
            }, // 当前时间
            calendarConverter: new Calendar(), // 插件 calendar.js 创建的实例
            initialDate: new Date(), // 用于初始化的时间
            timeData: null, // 时间点
            handleDate: {
              solar: '', // 公历
              lunar: '', // 农历
            }, // 当前选择数据
          }
        },
        props: {
          value: {
            type: String,
            default: '请选择',
          },
          ishaslunar: {
            // 是否启用农历日历 （不传则不启用农历）
            type: Boolean,
            default: false,
          },
          selectdatedom: {
            // 触发下拉的选择器
            type: String,
            default: '.select-date',
          },
          showdatedom: {
            // 用于展示的选择器
            type: String,
            default: '.show-date',
          },
        },
        template: `
        <div class="data-select">
          <p>选择后数据1：{{ handleDate.solar }}<p/>
        <p>选择后数据2：{{ handleDate.lunar }}<p/>
        <form action="/" method="post" class="form">
          <div class="data-bg">
            <label class="form-item item-line select-date">
              <b>出生日期：</b>
              <div class="pc-box">
                <span data-year="" data-month="" data-date="" class="show-date">请选择</span>
              </div>
            </label>
          </div>
          <input name="sex" type="hidden" class="sex" value="0" />
          <input type="hidden" name="data-year" class="data-year" value="" />
          <input type="hidden" name="data-month" class="data-month" value="" />
          <input type="hidden" name="data-date" class="data-date" value="" />
          <input type="hidden" name="data-time" class="data-time" value="" />
          </form>
          </div>
          `,
        // <!-- <span class="button" onclick="submit()">获取</span> -->
        mounted() {
          var that = this
          that.$nextTick(function () {
            // 获取选择器
            that.selectDateDom = $(that.selectdatedom)
            that.showDateDom = $(that.showdatedom)
            // console.log('初始化时间点', that.initialDate)
            // 获取日期
            // console.log(that.initialDate.getFullYear())
            // console.log(that.initialDate.getMonth() + 1)
            // console.log(that.initialDate.getDate())
            // 初始化时间
            // console.log('xzq', that.showDateDom)
            // that.showDateDom.attr('data-year', that.initialDate.getFullYear())
            // that.showDateDom.attr('data-month', that.initialDate.getMonth() + 1)
            // that.showDateDom.attr('data-date', that.initialDate.getDate())
            // 当前时间
            that.currentTime.year = that.initialDate.getFullYear()
            that.currentTime.month = that.initialDate.getMonth() + 1
            that.currentTime.day = that.initialDate.getDate()
            // 由日历实例获取当前时间点
            that.timeData = this.calendarConverter.getTime()
            // 初始化自定义日历选择器请选择出生日期
            that.selectDateDom.on('click', function () {
              // console.log('初始化日历实例')
              that.initCalendar()
            })
          })
        },
        methods: {
          // @辅助方法：新建 iosSelect 模拟 iOS 选择器的实例
          //! 下面判断是传入 公历/农历的数据
          // 年份数据
          yearData(callback) {
            var that = this
            callback(
              that.selectDateType == 1
                ? that.calendarConverter.initNormalCalendar()
                : that.calendarConverter.initLunarCalendar()
            )
          },
          // 月份数据
          monthData(year, callback) {
            var that = this
            callback(
              that.selectDateType == 1
                ? that.calendarConverter.getMonths(year)
                : that.calendarConverter.getLunarMonths(year)
            )
          },
          // 日期数据
          dateData(year, month, callback) {
            var that = this
            callback(
              that.selectDateType == 1
                ? that.calendarConverter.getDayCount(month)
                : that.calendarConverter.getLunarDayCount(year, month)
            )
          },
          // #创建日期表
          initCalendar() {
            var that = this
            if (that.bigNum.indexOf(that.numFlag.substr(0, 1)) >= 0) {
              // 若是农历则转化成公历
              var toSolarObj = null, // 农历表示对象
                oneLevelId = null,
                twoLevelId = null,
                threeLevelId = null
              // fourLevelId = null
              toSolarObj = Lunar.toSolar(
                that.currentTime.year,
                that.currentTime.month,
                that.currentTime.day
              )
              // 用于创建日历的参数
              oneLevelId = toSolarObj[0]
              twoLevelId = toSolarObj[1]
              threeLevelId = toSolarObj[2]
              // 更新此时状态
              that.currentTime.year = toSolarObj[0]
              that.currentTime.month = toSolarObj[1]
              that.currentTime.day = toSolarObj[2]
              that.numFlag = toSolarObj[1] + '月'
            } else {
              // 若是公历则不转化‘
              var oneLevelId = that.currentTime.year,
                twoLevelId = that.currentTime.month,
                threeLevelId = that.currentTime.day
            }
            // 创建日历实例
            that.createCalendar(oneLevelId, twoLevelId, threeLevelId, 'active')
          },
          // 创建 calendar 实例
          createCalendar(oneLevelId, twoLevelId, threeLevelId, activeClassName) {
            var that = this,
              flag = that.selectDateType === 1,
              title = '', // 顶部日历类型切换
              iosSelect = null // iosSelect 模拟 iOS 选择器实例
            // 自定义选择器标题
            title =
              '<div><span class="' +
              (flag ? activeClassName : '') +
              ' calendar" calendar-type="solar">公历</span><span class="calendar ' +
              (!flag ? activeClassName : '') +
              '" calendar-type="lunar">农历</span></div>'
            iosSelect = new IosSelect(3, [that.yearData, that.monthData, that.dateData], {
              title: title,
              headerHeight: 64,
              itemHeight: 50,
              itemShowCount: 5,
              oneLevelId: oneLevelId,
              twoLevelId: twoLevelId,
              threeLevelId: threeLevelId,
              // fourLevelId: fourLevelId,
              callback: function (selectOneObj, selectTwoObj, selectThreeObj) {
                // console.log('点击选择项-子项后自动获取的信息', selectOneObj, selectTwoObj, selectThreeObj, selectFourObj)
                that.currentTime.year = selectOneObj.id
                that.currentTime.month = selectTwoObj.id
                that.currentTime.day = selectThreeObj.id
                // 公历-选择器
                if (that.selectDateType === 1) {
                  // 生成对应的农历日期
                  var toLunarObj = Lunar.toLunar(
                    selectOneObj.id,
                    selectTwoObj.id,
                    selectThreeObj.id
                  )
                  // 保存数据
                  that.handleDate.solar =
                    selectOneObj.value + selectTwoObj.value + selectThreeObj.value // 公历
                  that.handleDate.lunar = toLunarObj[0] + '年' + toLunarObj[5] + toLunarObj[6] // 农历
                } else {
                  // 农历-选择器
                  // 生成对应的公历日期
                  var toSolarObj = Lunar.toSolar(
                    selectOneObj.id,
                    selectTwoObj.id,
                    selectThreeObj.id
                  )
                  // 保存数据
                  that.handleDate.solar =
                    toSolarObj[0] + '年' + toSolarObj[1] + '月' + toSolarObj[2] + '日' // 公历
                  that.handleDate.lunar =
                    selectOneObj.value + selectTwoObj.value + selectThreeObj.value // 农历
                }
              },
            })
            // 日历切换事件-监听
            $('[calendar-type="solar"]').on('click', function (e) {
              // console.log(e.currentTarget)
              that.changeEvent(e.currentTarget, 1)
            })
            $('[calendar-type="lunar"]').on('click', function (e) {
              // console.log(e.currentTarget)
              that.changeEvent(e.currentTarget, 2)
            })
          },
          /**
           * @description: iosSelect 头部切换
           * @param {HTMLElement} obj // 当前 dom 元素
           * @param {number} num 当前日历类型（公历/农历）
           * 1 公历
           * 2 农历
           * @return {*}
           */
          changeEvent(obj, num) {
            var that = this

            if (that.selectDateType == num) return // 不再重新初始化化创建 选择器
            that.selectDateType = num
            $('.olay').remove() // 不能同时存在两个iosselect组件
            if (that.selectDateType == 1) {
              that.initCalendar() // 重新初始化
              // 切换样式选中
              $('.' + obj.className)
                .eq(num - 1)
                .addClass('actice')
                .siblings()
                .removeClass('active')
            } else {
              // 若是公历则转化成农历
              if (that.bigNum.indexOf(that.numFlag.substr(0, 1)) < 0) {
                var toLunarObj = Lunar.toLunar(
                  that.currentTime.year,
                  that.currentTime.month,
                  that.currentTime.day
                )
                var oneLevelId = toLunarObj[0],
                  twoLevelId = toLunarObj[1],
                  threeLevelId = toLunarObj[2]
                // fourLevelId = showDateDom.attr('data-time')

                that.currentTime.year = toLunarObj[0]
                that.currentTime.month = toLunarObj[1]
                that.currentTime.day = toLunarObj[2]
                that.numFlag = toLunarObj[5].substr(-2, 2)
              } else {
                // 若是农历则不转化
                var oneLevelId = that.currentTime.year,
                  twoLevelId = that.currentTime.month,
                  threeLevelId = that.currentTime.day
                // fourLevelId = showDateDom.attr('data-time')
              }
              // 切换成农历时,需要重新创建组件
              that.createCalendar(oneLevelId, twoLevelId, threeLevelId, 'active')
              $('.' + obj.className)
                .eq(num - 1)
                .addClass('active')
                .siblings()
                .removeClass('active')
            }
          },
        },
      }

      var app = new Vue({
        el: '#app',
        components: {
          myComponent,
        },
        data: function () {
          return {}
        },
      })
    </script>
  </body>
</html>
